import React, { useCallback, useEffect, useState } from 'react'
import './ContentFooterLeft.scss'
import love from '@/assets/fonts/love.svg'
import { useAudioContext } from '@/views/Audio/Audio' 
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/modules/RootState'
import { Ar } from '@/modules/MusicList'
import { checkUndefined } from '@/utils/checkKeyStorage'
import { chanegeLyricHidden } from '@/store/musicList'

function ContentFooterLeft() {
  const audioDispatch = useAudioContext()
  const musicList = useSelector((state:RootState) => state.musicList)
  const dispatch = useDispatch()

  const [imgUrl,setUrl] = useState(checkUndefined(musicList.songs[audioDispatch.audioIndex],'http://s4.music.126.net/style/web2/img/default/default_album.jpg'))
  const [name,setName] = useState(checkUndefined( musicList.songs[audioDispatch.audioIndex],'暂无音乐'))
  const [author,setAuthor] = useState(checkUndefined(musicList.songs[audioDispatch.audioIndex],[]))
  // let name:string = '暂无音乐'
  // let author:Ar[] = [];

  useEffect(()=>{
    if(musicList.songs[audioDispatch.audioIndex]){
      console.log('进来了哦;66666666666666')
      setUrl(musicList.songs[audioDispatch.audioIndex].al.picUrl) 
      setName(musicList.songs[audioDispatch.audioIndex].name) 
      setAuthor(musicList.songs[audioDispatch.audioIndex].ar) 
      console.log(name)
      console.log(author)
    }
  },[audioDispatch.audioId])

  const hidden = useCallback(()=>{
    dispatch(chanegeLyricHidden(-1))
  },[musicList.lyricHidden])

  return (
    <div className="footerLeft-container">
        <div className='songImg'>
            <img src={imgUrl} alt="" onClick={()=>hidden()}/>
        </div>
        <div className="songName">
          <div className="songName2"> 
            <div className='name'>{name}</div>
            <img src={love} alt="" />
          </div>
          <div className="songName3">
            {
              author.map((item:Ar,index:number)=>{
                return(
                  <span key={index}>
                    {
                      index >= 1 ? ` / ${item.name}` : item.name
                    }
                  </span>
                )
              })
            }
          </div>
        </div>
    </div>
  )
}

export default React.memo(ContentFooterLeft)